.main{
    width: 100%;
    height: 91%;
    display: flex;
    flex-direction: row;
}
.left{
    width: 14%;
    height: 35%;
    margin-top: 5%;
}
.center{
    width: 72%;
    height: 65%;
    margin-top: 8%;
}
.cenTop{
    width: 100%;
    height: 5%;
    background-color:#DBB364 ;
}
.content{
    width: 100%;
    height: 93.5%;
    margin-top: 0.7%;
    background-color: rgba(255,255,255,0.6);
    display: flex;
    flex-direction: row;
}
.content .box{
    width: 28%;
    height: 70%;
    margin-left: 4%;
    margin-top: 5%;
    background-color: white;
}
.left .side{
    width: 60%;
    height: 100%;
}
.side .box{
    width: 100%;
    height: 17%;
    margin-bottom: 30%;
}
.side .box button{
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.6);
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px;
    color: #333333;
    border: none;
}
.chart{
    width: 100%;
    height: 100%;
}
@media screen and (min-width:2000px){
    #chart4,#chart5,#chart6,#chart7,#chart8,#chart9{
        width: 420%;
        height: 370%;
    }
}
@media screen and (max-width:2000px){
    #chart4,#chart5,#chart6,#chart7,#chart8,#chart9{
        width: 400%;
        height: 350%;
    }
}
@media screen and (max-width:1800px){
    #chart4,#chart5,#chart6,#chart7,#chart8,#chart9{
        width: 350%;
        height: 340%;
    }
}
@media screen and (max-width:1600px){
    #chart4,#chart5,#chart6,#chart7,#chart8,#chart9{
        width: 300%;
        height: 300%;
    }
}
@media screen and (max-width:1366px){
    #chart1,#chart2,#chart3{
        width: 110%;
        height: 110%;
    }
    #chart4,#chart5,#chart6,#chart7,#chart8,#chart9{
        width: 300%;
        height: 280%;
    }
}

